<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div::before{
				content: '帅哥';
				width: 50px;
				height: 50px;
				background: pink;
				display: inline-block;
			}
			div::after{
				content: '爱你';
				width: 50px;
				height: 50px;
				background: pink;
				display: inline-block;
				/* 是否隐藏 */
				visibility: hidden;
				/* visibility: visible; */
			}
			
		</style>
	</head>
	<body>
		<!-- 
		 伪元素选择器
		 伪元素选择器作用就是给指定标签的内容前面添加一个子元素
		 或者给指定标签的内容后面添加一个子元素。
		 
		 格式:标签名称::brfore{ 
			 content:'帅哥 '; 
			 }
		 
		 标签名称::after{ 
			 content:'  ';
			 } 		 
		 
		 -->
		 <div>
			 张小明
		 </div>
	</body>
</html>
